<template>
  <div class="goodsList-warp">
    <div class="topBox">
      <div class="address-menu" :class="{'active':istive==0}" @click="getMo1(0)">
          <p>默认排序</p>
      </div>
      <div class="address-menu bor" :class="{'active':istive==1}" @click="getMo2(1)" >
        <p >
            销量
        </p>
      </div>
      <div class="address-menu" :class="{'active':istive==2}" @click="getMo3(2)">
        <p>价格</p>
        <div class="show-arrow-wrap flip-off" :class="{'flip-on':istive==2}">
            <div class="show-arrow"></div>
         </div>
      </div>
    </div>
    <div class="section"  v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="busy"
                infinite-scroll-distance="10">
                <div class="list clearfix">
                   <shop-item :shopItem="goodsListItem" v-for="(goodsListItem,index) in goodsList" :key="index"></shop-item>
              </div>
         <load-more :tip="loadingText" :show-loading="loading"></load-more>
    </div>
  </div>
</template>
<script>
import ShopItem from "../components/shopItem";
import {LoadMore} from 'vux'
export default {
    components: {
    ShopItem, LoadMore
  },
  data() {
    return {
      istive:0,
      busy:false,
      pageNumber:0,
      loadingText:"正在加载",
      type:'',
        loading:true,
      listQuery: {
        pageNumber: 0,
        pageSize: 10,
        param:{
            name: ""
        },
      },
      goodsList: [],
    };
  },
  created() {
      let title = "【发现好货】  晨烨超级购",
      desc = "好货等你来",
      link = window.location.href;
      this.wxShare(title,desc,link)
  },
  mounted() {
  },
  methods: {
      loadMore() {
          this.busy =true;
          this.listQuery.pageNumber++;
          this.getMo();
          console.log('load')
        },
      getMo(k){
        var self=this
        if(this.$route.query.id){
          this.listQuery.param.firstKindId=this.$route.query.id
        }
        if(this.$route.query.productId){
            this.listQuery.param.kindId=this.$route.query.productId
        }
        if(this.$route.query.name){
         this.listQuery.param.name=this.$route.query.name
        }
          console.log(this.listQuery)
          this.$axios.post('/device/product/list',this.listQuery).then((res) => {
               console.log(res)
               self.goodsList=self.goodsList.concat(res.data.data.list)
             if(res.data.data.list.length<10){
                     self.busy = true
                     self.loadingText="没有数据啦·～～·"    
                     self.loading=false  
                }else{  
                     self.busy = false
                }
          })
      },
      getMo3(){
        this.goodsList=[]
        this.listQuery.pageNumber=1
       if(this.istive==2){
               this.istive=3  //降序
               this.listQuery.param.orderField= "discountPrice"
                this.listQuery.param.orderRule= "DESC"
          }else{
                this.listQuery.param.orderField= "discountPrice"
                this.listQuery.param.orderRule= "ASC"
                this.istive=2
            }
         this.getMo();
      },
      getMo1(){
       this.istive=0
       this.goodsList=[]
       this.listQuery.pageNumber=1
       this.getMo();
      },
      getMo2(){
        this.istive=1
        this.listQuery.pageNumber=1
        this.listQuery.param.orderField= "sold"
        this.listQuery.param.orderRule= "DESC"
        this.goodsList=[]
        this.getMo();
      },
  }
};
</script>
<style lang="less" scoped>
.list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    a{
        -webkit-box-flex: 0;
    -ms-flex: 0 0 48%;
    flex: 0 0 48%;
    text-align: left;
    }
}
.section{
   height: 100%;
   overflow:auto;
   background: #fff;
   padding-top: 95px;
   box-sizing: border-box;
   padding-left: 20px;
   padding-right: 20px;
}
.flip-off{
   -webkit-transform: rotate(0deg);
}
.show-arrow-wrap{
    top: 18px;
    right: 60px;
    position: absolute;
    display: inline-block;
    height: 60px;
    line-height: 60px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
}

.show-arrow{
    display: inline-block;
     width: 18px;
    height: 18px;
    margin: 0.08rem 0.1rem 0.08rem 0.1rem;
    border-left: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.bor{
    border-left:2px solid #dedede;
    width:100%;
    display: block;
    border-right:2px solid #dedede;
}
.goodsList-warp{
  height: 100%;
  box-sizing: border-box;
  background: #f3f5f9;
  .weui-mask{
    top: 95px;
    .seq-box{
      background: #fff;
    }
  }
  .topBox{
    display: flex;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 95px;
    border-bottom: .013333rem /* 1/75 */solid #dcdcdc;
    align-items: center;
    background: #fff;
    z-index: 9999;
    .address-menu{
        flex:1;
        display: flex;
        justify-content: center;
        align-items:center;
        font-size:26px;
        height:95px;
        .flip-on{
     -webkit-transform: rotate(180deg);
}
        p{
            height:90px;
            line-height:90px;
        }
     
    }
     .active{
         p{
           border-bottom:4px solid #ffab27;
         }
         color:#ffab27;
      }
        // 这里是终点
    .seqBox{
      width: 266px;
      border-left: 1px solid #ddd;
      padding-left: 64px;
      margin-left: 30px;
      align-items: center;
      div{
        // margin-right: 5px;
      }
      img{
        margin-left: 10px;
        width: 20px;
        height: 12px;
      }
    }
    .seqBox.active{
      color: #ff4444;
    }
    .filterBox{
      width: 242px;
      border-left: 1px solid #ddd;
      padding-left: 64px;
      align-items: center;
      div{
        // margin-right: 5px;
      }
      img{
        margin-left: 10px;
        width: 20px;
        height: 12px;
      }
    }
    .filterBox.active{
      color: #ff4444;
    }
  }
  .shop-list{
    // display: flex;
    // flex-wrap: wrap;
    background: #fff;
    margin-top: 16px;
    padding: 20px;
    padding-top: 0;
    li{
      width: 100%;
      height: 296px;
      // border-bottom: 1px solid #efefef;
      .item-box {
        width: 100%;
        background: #fff;
        height: 296px;
        border-bottom: 1px solid #efefef;
        .left {
            width: 180px;
            height: 234px;
            margin-left: 24px;
            margin-top: 32px;
        }
        .center {
            width: 430px;
            margin-top: 32px;
            margin-left: 52px;
            margin-right: 20px;
            .name-box {
                height: 78px;
                font-size: 15rem/37.5;
                color: #333;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .section-line {
                font-size: 15rem/37.5;
                color: #ff4444;
                margin-top: 78px;
            }
            .supplement{
                display: flex;
                color: #979797;
                font-size: 22px;
                justify-content: space-between;
                margin-top: 8px;
                // padding-bottom: 6rem/37.5;
            }
        }
      }
    }
  }
}
</style>


